<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<!-- saved from url=(0019)http://guajibao.me/ -->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">


    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>不关机的云端电脑</title>
    <link rel="icon" type="image/x-icon" mce_href="/favicon.ico" href="image/favicon.ico">
    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="css/bootstrap-docs.min.css">
    <!--[if lt IE 8]>
    <link rel="stylesheet" href="css/bootstrap-ie7.css">
    <![endif]-->


    <script src="js/jquery.min.js"></script>
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>

    <![endif]-->
    <script src="js/bootstrap.js" type="text/javascript"></script>
    <script type="text/javascript" src="bootstrap/plugin/jquery-dataTables/jquery.dataTables.min.js"></script>
    <script type="text/javascript" src="bootstrap/plugin/jquery-dataTables/dataTables.bootstrap.min.js"></script>
    <script type="text/javascript"
            src="bootstrap/plugin/bootstrap3-dialog/js/bootstrap-dialog.min.js"></script>
    <script type="text/javascript" src="bootstrap/plugin/bootstrap-waitingfor/bootstrap-waitingfor.js"></script>

    <link rel="stylesheet" href="bootstrap/plugin/bootstrap3-dialog/css/bootstrap-dialog.min.css
    "/>
    <script type="text/javascript" src="js/util.js">


    </script>
</head>

<body data-spy="scroll" data-target="#myScrollspy">

<div>
    <nav class="navbar-l1 navbar-default navbar-static-top" role="navigation" style="background-color:#008eb7;"
         onmouseover="javascript:$('#navbar-brand').css('color','#fff');"
         onmouseout="javascript:$('#navbar-brand').css('color','#00a2ca');">
        <div class="container-fluid">
            <div class="navbar-header">
                <a id="navbar-brand" class="navbar-brand" style="" href="/">vpsb2c.com</a>
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                        data-target="#bs-navbar-collapse-1"><span class="sr-only">Toggle navigation</span><span
                        class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>
            </div>
            <div class="collapse navbar-collapse" id="bs-navbar-collapse-1">
                <ul class="nav navbar-nav navbar-right">
                    <li><a style="" href="/?mode=profile" title="当前用户：jiaoming42">您好，${loginedUser.nickname}</a></li>
                    <li></li>
                    <li></li>
                    <li><a style="" href="/logout" title="退出系统"><span
                            class="glyphicon glyphicon-log-out"></span>退出系统</a></li>

                </ul>
            </div>
            <!-- /.navbar-collapse -->
        </div>
        <!-- /.container-fluid -->
    </nav>
    <nav class="navbar-l2 navbar-default navbar-static-top" role="navigation">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                        data-target="#bs-navbar-collapse-2"><span class="sr-only">Toggle navigation</span><span
                        class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>
            </div>
            <div class="collapse navbar-collapse" id="bs-navbar-collapse-2">
                <ul class="nav navbar-nav">
                    <c:choose>
                        <c:when test="${loginedUser.role == 0}">
                            <li class="active"><a style="padding-left:20px;padding-right:20px;" href="/">我的</a></li>
                        </c:when>
                        <c:otherwise>
                            <li class="active"><a style="padding-left:20px;padding-right:20px;" href="/">我的</a></li>
                            <%--<li><a style="padding-left:20px;padding-right:20px;" href="/recordVps">VPS登记</a></li>--%>
                            <li><a style="padding-left:20px;padding-right:20px;" href="/userList">用户列表</a></li>
                            <li><a style="padding-left:20px;padding-right:20px;" href="/hostList">主机</a></li>
                            <%--<li><a style="padding-left:20px;padding-right:20px;" href="/income">流水</a></li>--%>
                            <c:if test="${loginedUser.role == 2}">
                                <li><a style="padding-left:20px;padding-right:20px;" href="/admin">设置管理员</a></li>
                            </c:if>
                        </c:otherwise>
                    </c:choose>


                </ul>
            </div>
            <!-- /.navbar-collapse -->
        </div>
        <!-- /.container-fluid -->
    </nav>
    <div class="container-fluid">

        <div class="page-header">
            <div class="row">
                <div class="col-md-7 btn-group">
                    <h4>登陆账号：${loginedUser.email}
                        <c:if test="${loginedUser.role == 1}">
                            <span style="margin-left:20px;">我的邀请码：<font
                                    color="red">${loginedUser.inviteCode}</font> </span>
                            <span style="margin-left:20px;">角色：<font color="blue">管理员</font> </span>
                            <span style="margin-left:20px; display: none">我登记的主机数量：<font
                                    color="blue">${vpsRecordCount}</font> 台 </span>
                        </c:if>
                    </h4>
                </div>
                <div class="col-md-5 dropdown btn-group">
                    <a class="btn btn-primary" type="button" href="/modifyPassword"> 修改密码</a>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-6">
                <div class="panel panel-info">
                    <div class="panel-heading">注册信息：</div>
                    <div class="panel-body">
                        <div class="row form-group">
                            <div class="col-md-3">姓名：</div>
                            <div class="col-md-9">${loginedUser.nickname}</div>
                        </div>
                        <div class="row form-group">
                            <div class="col-md-3">QQ：</div>
                            <div class="col-md-9">${loginedUser.qq}</div>
                        </div>

                        <div class="row form-group">
                            <div class="col-md-3">电话：</div>
                            <div class="col-md-9">${loginedUser.telephone}</div>
                        </div>
                        <div class="row form-group">
                            <div class="col-md-3">电子邮箱：</div>
                            <div class="col-md-9">${loginedUser.email}</div>
                        </div>
                        <div class="row form-group">
                            <div class="col-md-3">注册时间：</div>
                            <div class="col-md-9">${loginedUser.registerTime}</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6" style="display: none">
                <div class="panel panel-info">
                    <div class="panel-heading">配额及权限：</div>
                    <div class="panel-body">
                        <div class="row form-group">
                            <div class="col-md-4">试用许可：</div>
                            <div class="col-md-8"><font color="red">2</font> 个</div>
                        </div>
                        <div class="row form-group">
                            <div class="col-md-4">同时开通数量：</div>
                            <div class="col-md-8">5 VMs</div>
                        </div>
                        <div class="row form-group">
                            <div class="col-md-4">最大快照数量：</div>
                            <div class="col-md-8">1 个快照/VM</div>
                        </div>
                        <div class="row form-group">
                            <div class="col-md-4">升降级配置次数：</div>
                            <div class="col-md-8">4 次/月/VM</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row" style="margin-left: 10px;">

            <h4>我的vps</h4>
        </div>

    </div>
    <div class="row" style="margin-left: 10px;margin-right: 10px">

        <table id="example" class="table table-striped table-bordered dataTable" cellspacing="0"
               role="grid" aria-describedby="example_info">
            <thead>
            <tr role="row">

                <th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1"
                    aria-label="Position: activate to sort column ascending" style="width: 141px;">Vps名称
                </th>
                <%--<th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1"--%>
                <%--aria-label="Office: activate to sort column ascending" style="width: 62px;">VpsIp地址--%>
                <%--</th>--%>
                <th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1"
                    aria-label="Office: activate to sort column ascending" style="width: 62px;">操作系统
                </th>

                <th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1"
                    aria-label="Office: activate to sort column ascending" style="width: 62px;">购买金额
                </th>
                <th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1"
                    aria-label="Office: activate to sort column ascending" style="width: 62px;">购买天数
                </th>
                <th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1"
                    aria-label="Office: activate to sort column ascending" style="width: 62px;">剩余时间
                </th>
                <th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1"
                    aria-label="Office: activate to sort column ascending" style="width: 62px;">VPS状态
                </th>

                <th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1"
                    aria-label="Office: activate to sort column ascending" style="width: 62px;">最后刷新时间
                </th>

                <th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1"
                    aria-label="Age: activate to sort column ascending" style="width: 25px;">操作
                </th>

            </tr>
            </thead>

            <tfoot>

            </tfoot>

            <tbody>
            <c:forEach items="${userVpsVoList}" var="userVpsVo">

                <tr role="row" class="odd">
                    <td class="sorting_1">${userVpsVo.vpsName}</td>
                        <%--<td>${userVpsVo.ip}</td>--%>
                    <td>${userVpsVo.os}</td>
                    <td>${userVpsVo.rmb}</td>
                    <td>${userVpsVo.buyDays}</td>
                    <td>${userVpsVo.leftTime}</td>
                    <td id="${userVpsVo.vpsId}_vps_state">${userVpsVo.status}</td>

                    <td>${userVpsVo.statusLastRefreshTime}</td>
                    <td>
                        <c:choose>
                            <c:when test="${!userVpsVo.leftTime.equals('过期')}">
                                <div id="${userVpsVo.vpsId}_command_div">
                                    <button class="btn btn-small btn-success" onclick="
                                            vpsStart(${userVpsVo.vpsId},this)"> 开机
                                    </button>

                                    <button class="btn btn-small btn-warning"
                                            onclick="vpsPowerOff(${userVpsVo.vpsId})"> 关机
                                    </button>

                                    <button class="btn btn-small btn-primary"
                                            onclick="resetartVps(${userVpsVo.vpsId})"> 重启
                                    </button>
                                    <%--<button class="btn btn-small btn-danger"--%>
                                            <%--onclick="createSnapshot(${userVpsVo.vpsId})"> 备份--%>
                                    <%--</button>--%>
                                    <button class="btn btn-small btn-danger"
                                            onclick="restoreSnapshot(${userVpsVo.vpsId})"> 恢复
                                    </button>
                                </div>
                            </c:when>
                        </c:choose>
                        <div style="display: none" id="${userVpsVo.vpsId}_tip_div">
                            <div class="row">
                                <div class="col-sm-1">

                                </div>
                                <div class="col-sm-10 text-center">
                                    <h5 style="margin: 0px;" id="${userVpsVo.vpsId}_tip_div_text">正在关机,请稍后...</h5>
                                </div>

                                <div class="col-sm-1">

                                </div>
                            </div>
                            <div class="row">
                                <div class="col-sm-1">

                                </div>
                                <div class="col-sm-10">
                                    <div class="progress progress-striped active" style="margin-bottom:0;">
                                        <div class="progress-bar progress-bar-warning"
                                             style="width: 100%"></div>
                                    </div>
                                </div>

                                <div class="col-sm-1">

                                </div>
                            </div>
                        </div>

                    </td>


                </tr>
            </c:forEach>

            </tbody>
        </table>
    </div>
</div>
</div>
</body>
</html>
